<template>
  <div class="myswitch" :class="type == 1 ? 'color2' : ''">
    <div class="boll"></div>
  </div>
</template>

<script>
export default {
  name: "myswitch",
  props: {
    type: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="less" scoped>
.myswitch {
  width: 32px;
  height: 12px;
  border-radius: 6px;
  background: rgba(220, 238, 230, 0.7);
  position: relative;
  .boll {
    position: absolute;
    top: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(82, 225, 169, 1);
    right: 0;
  }
  &.color2 {
    background: rgba(243, 230, 230, 1);
    .boll {
      background-color: rgba(242, 87, 87, 1);
      right: auto;
      left: 0;
    }
  }
}
</style>